<template>
  <section class="container">
    <b-row class="mx-0">
      <b-col lg="4" md="12" sm="12" class="wow slideInLeft">
        <b-img fluid :src="require('~/static/img/about/about01.jpg')"></b-img>
      </b-col>
      <b-col lg="8" md="12" sm="12" class="wow slideInRight">
        <h3 class="title mb-0">关于我们</h3>
        <small class="sub-title">about us</small>
        <p class="desc text-muted mt-3">让您更全面的了解我们</p>
        <p class="content text-justify mt-5"><span class="first-letter">阜</span>阳师范大学信息工程学院计算机协会成立于2017年6月1日，由指导老师冯莹莹副教授指导创办。计算机协会以激发信工学子计算机学习的兴趣，提高学生计算机水平为主，同时也为我校计算机方面的人才提供了一个充满活力的研发氛围。计算机协会作为一个学术型的社团，秉承着“开拓、创新、拼搏”的精神，不断地在各级大赛中创造佳绩，并且一次次的刷新着我校历史的最好成绩。创新、突破是我们不变的主旋律，团结、交流是我们创造辉煌的垫脚石。我们立志通过各种充满专业性、趣味性的活动，让我们的信工学子走进一个无与伦比的科技世界。我们也奉献出我们自己的热情和计算机知识，给同学们奏响源自计协的福音。</p>
        <b-button variant="outline-info"
          class="mt-5 px-5"
          @click="handleAboutClick"
        >了解更多</b-button>
      </b-col>
    </b-row>
  </section>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations(['setSubNavIndex']),
    handleAboutClick() {
      this.setSubNavIndex(0)
      this.$router.push('/client')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';

.container {
  padding-top: 70px;
  padding-bottom: 70px;
}
@media screen and (max-width: 992px) {
  .title {
    margin-top: 15px;
  }
  .title, .sub-title, .desc {
    text-align: center;
  }
  .sub-title, .btn {
    display: block;
    margin: 0 auto;
  }
}
.first-letter {
  font-size: 32px;
  color: #17a2b8;
}
</style>
